<template>
  <div class="count">
    <h2>当前求和为：{{ count }}</h2>
    <h2>放大 1000 倍后：{{ bigSum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
import {ref} from "vue";
import {storeToRefs} from "pinia";
import useCountStore from "@/store/count.ts";
/**
 * 这里的 useCountStore() 调用了 store/count.ts 文件中的 useCountStore() 函数，
 */
const countStore = useCountStore();

/**
 * storeToRefs 只会关注 store 中的数据，不会对方法进行 ref 包裹
 */
const {count, bigSum} = storeToRefs(countStore);

/**
 * 这里的 countStore.count 调用了 store/count.ts 文件中的 count 变量，
 */
const n = ref(1);

/**
 * add
 */
const add = () => {
  // 第一种修改方式
  // countStore.count += n.value;

  // 第二种修改方式
  // countStore.$patch({
  //   count: countStore.count + n.value
  // });

  // 第三种修改方式
  countStore.increment(n.value);
}

/**
 * sub
 */
const sub = () => {
  countStore.count -= n.value;
}
</script>

<style scoped lang="scss">
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

select, button {
  margin: 0 5px;
  height: 25px;
}
</style>
